<template>
  <div class="FaultRegion">
    <div class="fault_content">
      <div
        class="child"
        v-for="(dataItem, index) in list"
        :key="dataItem.id + '-child-' + index"
      >
        <div
          class="column"
          :style="{
            marginRight:
              dataItem.children && dataItem.children.length > 1 ? '20px' : '',
          }"
        >
          <div
            class="column_name"
            :id="dataItem"
            :style="
              dataItem.children && dataItem.children.length
                ? 'justify-content: center;'
                : ''
            "
          >
            <div
              class="column_box"
              :class="
                dataItem.children && dataItem.children.length
                  ? 'father'
                  : 'child'
              "
              :ref="dataItem.id"
              :id="dataItem.id"
              style="width: 110px"
            >
              <!-- 集群or节点的名称-->
              <div class="name">
                <!--集群-->
                <div
                  v-if="dataItem.children && dataItem.children.length"
                  style="display: flex"
                >
                  <div class="father_title">{{ dataItem.name }}</div>
                </div>
                <!--节点-->
                <div v-else :class="dataItem.checked ? 'active' : 'noActive'">
                  <div class="line" v-if="!dataItem.children"></div>
                  <div class="child_title">{{ dataItem.name }}</div>
                </div>
                <p
                  class="icon"
                  @click="iconClcik(dataItem)"
                  :class="dataItem.name === '点击更多' ? 'more' : ''"
                  style="margin-left: 10px"
                >
                  <i
                    :class="dataItem.checked ? 'el-icon-minus' : 'el-icon-plus'"
                    v-if="dataItem.name != '点击更多'"
                  ></i>
                  <i v-else class="el-icon-d-arrow-right"></i>
                </p>
              </div>
            </div>
          </div>

          <!--     节点的下一级              -->
          <div v-if="dataItem.name != '集群'">
            <div class="child_list" v-show="dataItem.checked">
              <div
                class="child_icon"
                v-show="
                  dataItem.checked && dataItem.child && dataItem.child.length
                "
              >
                <div class="child_line"></div>
                <div class="child_brackets"></div>
              </div>
              <div class="child_content">
                <div
                  v-for="(item, index) in dataItem.child"
                  :key="index"
                  class="child_list_row"
                >
                  <div class="child_circle"></div>
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 递归组件展示子节点 -->
        <div
          class="node_list"
          v-if="
            dataItem.children && dataItem.children.length && dataItem.checked
          "
        >
          <RightTree :list="dataItem.children" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeaderLine from "leader-line-vue";

export default {
  name: "RightTree",
  components: {},
  data() {
    return {
      lines: [],
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLeaderLine(this.list);
    });
    // 检测滚动事件
    const dom = document.getElementsByClassName("f_con")[0];
    if (dom) {
      dom.onscroll = () => {
        this.drawLine();
        this.doResize();
      };
    }
  },

  beforeDestroy() {
    /**
     * 离开页面时销毁所有line
     */
    if (this.lines && this.lines.length) {
      this.lines.forEach((line) => {
        line.remove();
      });
    }
  },
  methods: {
    /**
     * 销毁所有线条
     */
    destoryLine() {
      if (this.lines && this.lines.length) {
        this.lines.forEach((line) => {
          line.remove();
        });
      }
    },
    /**
     * 根据上下级关系绘制线条
     */
    drawLeaderLine(list) {
      this.lines.splice(0);
      list.forEach((element) => {
        let start = document.getElementById(element.id);
        if (element.children && element.children.length) {
          element.children.forEach((child) => {
            let line = LeaderLine.setLine(
              start,
              document.getElementById(child.id)
            );
            line.color = "#1890ff";
            line.size = 2;
            line.setOptions({
              solid: { animation: true },
            });
            this.lines.push(line);
          });
        }
      });
    },
    /**
     * icon点击
     */
    iconClcik(dataItem) {
      dataItem.checked = !dataItem.checked;
      if (dataItem.name === "点击更多") {
        if (dataItem.checked) {
          // this.$eventBus.$emit("changeData", false);
          this.$emit("changeData", false);
        } else {
          this.$emit("changeData", true);
          //   this.$eventBus.$emit("changeData", true);
        }
      } else {
        //  集群
        if (dataItem.children && dataItem.children.length) {
          if (dataItem.checked) {
            this.$nextTick(() => {
              // 划线
              this.drawLeaderLine(this.list);
            });
          } else {
            this.destoryLine(); // 清除线
          }
        } else {
          // 子节点
          this.doResize();
        }
      }
    },
    /**
     * 手动触发resize事件
     */
    doResize() {
      setTimeout(function () {
        //手动触发窗口resize事件
        if (document.createEvent) {
          var event = document.createEvent("HTMLEvents");
          event.initEvent("resize", true, true);
          window.dispatchEvent(event);
        } else if (document.createEventObject) {
          window.fireEvent("onresize");
        }
      }, 100);
    },
    /**
     * 渲染线条
     */
    drawLine() {
      if (this.lines && this.lines.length) {
        this.lines.forEach((line) => {
          line.position();
        });
      }
    },
  },
};
</script>

<!-- <style lang="scss" scoped>
.FaultRegion {
  .fault_content {
    margin-top: 20px;

    .child {
      display: flex;
      background-color: #fff;

      .column {
        display: flex;
        align-items: center;
        margin: 10px 0;

        .column_name {
          cursor: pointer;
          height: 100%;
          display: flex;
          align-items: center;
          width: 180px;
          text-align: center;
          justify-content: end;
          position: relative;
          padding: 10px 0;
          //background-color: red;

          .column_box {
            text-align: left;
            width: 32px;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: #333333;
            display: flex;
            justify-content: end;

            .name {
              display: flex;
              justify-content: end;
              align-items: center;
              font-family: MicrosoftYaHei;
              color: #333333;

              .line {
                width: 2px;
                height: 14px;
                background: #e05e5e;
                margin-right: 5px;
              }

              .father_title {
                font-size: 15px;
                max-width: 56px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .child_title {
                font-size: 14px;
                width: 56px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .noActive {
                padding: 10px;
                display: flex;
              }

              .active {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px;
                height: 33px;
                background: rgba(223, 239, 255, 0.7);
                border-radius: 4px;
                border: 1px solid #64a9ef;
              }
            }

            .icon {
              width: 14px;
              height: 14px;
              border-radius: 2px;
              border: 1px solid #d4d4d4;
              color: #d4d4d4;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              //margin-left: 30px;
              //margin-right: 60px;

              i {
                font-size: 4px;
              }
            }

            .more {
              border: none;

              i {
                transform: rotate(90deg);
              }
            }
          }

          .father {
            display: flex;
            justify-content: end;
            align-items: center;
          }
        }
      }

      .node_list {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .child_list {
        display: flex;

        .child_icon {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          position: relative;

          .child_line {
            width: 45px;
            height: 2px;
            background-color: #1b70ca;
          }

          .child_brackets {
            width: 2px;
            height: 100%;
            background: #1b70ca;
          }

          &::before {
            content: "";
            width: 2px;
            height: 7px;
            position: absolute;
            right: -2px;
            bottom: -5px;
            background: #1b70ca;
            transform: rotate(-45deg);
          }

          &::after {
            content: "";
            width: 2px;
            height: 7px;
            position: absolute;
            right: -2px;
            top: -5px;
            background: #1b70ca;
            transform: rotate(45deg);
          }
        }

        .child_content {
          display: flex;
          flex-direction: column;

          .child_list_row {
            display: flex;
            align-items: center;
            margin-left: 10px;
            margin-bottom: 10px;

            .child_circle {
              width: 4px;
              height: 4px;
              background: #a7d2ff;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
        }

        .child_content :last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
 -->
